<template>
  <a-modal
    :visible="isShow"
    title="添加代表团"
    :width="1060"
    destroyOnClose
    @ok="achieve"
    @cancel="emit('setBaseUnion')"
  >
    <a-transfer
      style="display: flex; justify-content: center"
      v-model:target-keys="targetKeys"
      :data-source="mockData"
      show-search
      :filter-option="filterOption"
      :render="(item:any) => item.title"
      @change="handleChange"
      @search="handleSearch"
    />
  </a-modal>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
  const emit = defineEmits<{
    (enent: "setBaseUnion"): void;
  }>();
defineProps<{
  isShow:boolean
}>()
interface MockData {
  key: string;
  title: string;
  description: string;
  chosen: boolean;
}
const mockData = ref<MockData[]>([]);

const targetKeys = ref<string[]>([]);
onMounted(() => {
  getMock();
});

// const show = ref(true);

const getMock = () => {
  const keys = [];
  const mData = [];
  for (let i = 0; i < 20; i++) {
    const data = {
      key: i.toString(),
      title: `content${i + 1}`,
      description: `description of content${i + 1}`,
      chosen: Math.random() * 2 > 1,
    };
    if (data.chosen) {
      keys.push(data.key);
    }
    mData.push(data);
  }
  mockData.value = mData;
  targetKeys.value = keys;
};
const filterOption = (inputValue: string, option: MockData) => {
  return option.description.indexOf(inputValue) > -1;
};
const handleChange = (
  keys: string[],
  direction: string,
  moveKeys: string[]
) => {
  console.log(keys, direction, moveKeys);
};

const handleSearch = (dir: string, value: string) => {
  console.log("search:", dir, value);
};


const achieve = ()=>{
  emit('setBaseUnion')
}
</script>

<style scoped lang="less">
:deep(.ant-transfer-list) {
  width: 40%;
  height: auto;
  max-height: 300px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
}
:deep(.ant-transfer) {
  display: flex;
  justify-content: center;
}
</style>
